<template>
	<view class="container">
		<!-- 导航 -->
		<view class="timer-nav">
			<view @click="toOverAll" class="nav-back-icon">
				<tobackVue :ref="userediterRef"></tobackVue>
			</view>
			<view class="nav-back-text">编辑个人信息</view>
		</view>
		<!-- 用户头像 -->
		<view class="user-editer-head">
			<image :src="head_url"></image>
		</view>
		<!-- 表单 -->
		<view class="user-editer-form">
			<view class="uni-label-text">
				昵称
			</view>
			<input type="text" data-id="0" @focus="onUsernameFocus" v-model="user.username" />
			<view class="uni-label-text">
				手机绑定
			</view>
			<input type="text" data-id="1" @focus="onUsernameFocus" v-model="user.phone" />
			<view class="uni-label-text">
				邮箱绑定
			</view>
			<input type="text" data-id="2" @focus="onUsernameFocus" v-model="user.email" />
			<view class="uni-label-text">
				微信绑定
			</view>
			<input type="text" data-id="3" @focus="onUsernameFocus" v-model="user.wx" />
			<view class="uni-label-text">
				修改密码
			</view>
			<input type="text" data-id="4" @focus="onUsernameFocus" v-model="user.password" />
			
			<!-- 退出 -->
			<view class="user-editer-btn">
				<button type="warn" @click="logout">退出登录</button>
			</view>
		</view>
		
		
		<!-- 弹出框 -->
		<view class="user-editer-pop" v-show="showPop">
			<view class="pop-title">
				{{popTitleList[popIndex]}}设置
			</view>
			<view class="pop-input">
				<view class="pop-input-content" v-if="popIndex === 0">
					<input :ref="inputRefList[0]" type="text" v-model="user.username"  />
					<view class="pop-btn">
						<button type="default" @click="closeActivePop">取消</button>
						<button type="warn" @click="setUserPropertie(popIndex)">确定</button>
					</view>
				</view>
				<view class="pop-input-content" v-if="popIndex === 1">
					<input :ref="inputRefList[1]" type="text" v-model="user.phone"   />
					<view class="pop-btn">
						<button type="default" @click="closeActivePop">取消</button>
						<button type="warn" @click="setUserPropertie(popIndex)">确定</button>
					</view>
				</view>
				<view class="pop-input-content" v-if="popIndex === 2">
					<input :ref="inputRefList[2]" type="text" v-model="user.email"   />
					<view class="pop-btn">
						<button type="default" @click="closeActivePop">取消</button>
						<button type="warn" @click="setUserPropertie(popIndex)">确定</button>
					</view>
				</view>
				<view class="pop-input-content" v-if="popIndex === 3">
					<input :ref="inputRefList[3]" type="text" v-model="user.wx"  />
					<view class="pop-btn">
						<button type="default" @click="closeActivePop">取消</button>
						<button type="warn" @click="setUserPropertie(popIndex)">确定</button>
					</view>
				</view>
				<view class="pop-input-content" v-if="popIndex === 4">
					<input :ref="inputRefList[4]" type="text" v-model="user.password" />
					<view class="pop-btn">
						<button type="default" @click="closeActivePop">取消</button>
						<button type="warn" @click="setUserPropertie(popIndex)">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="user-editer-mask" v-show="showPop" @click="closeActivePop">
		</view>
	</view>
</template>

<script>
	import tobackVue from "../../componets/toback/toback.vue";
	import api from "../../api/api.js";
	export default {
		data() {
			return {
				userediterRef: "userediterRef",
				user: {},
				head_url: '',
				path:"",
				showPop: false,
				popTitleList: [
					"昵称",
					"手机",
					"邮箱",
					"微信",
					"密码"
				],
				popIndex: 0,
				tmpVal:null,
				onfocusFlg:true,
				inputRefList:[
					"pop0",
					"pop1",
					"pop2",
					"pop3",
					"pop4",
				],
				pop0:'pop0'
			}
		},
		components: {
			tobackVue
		},
		onLoad(option) {
			this.updateUserInfoFromStorage();
			
		},
		onShow() {
			let timer = setTimeout(() =>{
				this.updateUserInfoFromStorage();
				clearTimeout(timer);
				timer = null;
			},500)
		},
		methods: {
			// 即时更新用户信息
			updateUserInfoFromStorage(){
				uni.getStorage({
					key:api.base.userInfo,
					success: res =>{
						this.user = res.data;
					}
				})
			},
			// 更新用户信息到本地缓存
			updateToStorage(){
				uni.getStorage({
					key: api.base.userInfoHead,
					success: res => {
						// console.log(res.data)
						api.getUserInfo(res.data).then(res => {
							if (res.data === null) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							} else {
								this.path = res.data.headUrl;
								this.user = res.data;
								this.head_url = api.base.baseUrl + api.base.getUserHeadImage + "?path=" +
									this.path;
								uni.setStorage({
									key: api.base.userInfo,
									data: this.user,
								})
							}
						})
					},
					complete: data => {
						if (data.data == '') {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					}
				});
			},
			
			toOverAll() {
				uni.$refs.userediterRef[0].toBack();
			},
			onUsernameFocus(e) {
				this.showPop = true;
				this.popIndex = parseInt(e.currentTarget.dataset.id);
			},

			closeActivePop() {
				this.showPop = false;
				this.updateUserInfoFromStorage();
			},
			setUserPropertie(item) {
				console.log('item', item);
				
				uni.getStorage({
					key:api.base.userInfoHead,
					success: (res) => {
						this.preSetProperties(this.$refs[this.inputRefList[item]].value)
						// console.log('更改前查看数据',this.user);
						api.updateUserInfo(res.data, this.user).then(res =>{
							if(res.code === 200){
								uni.setStorage({
									key:api.base.userInfo,
									data: this.user,
									success:() =>{
										
										console.log('更改后查看数据',this.user);
										let timer = setTimeout(()=>{
											this.updateToStorage();
											clearTimeout(timer);
											timer = null;
										},1000)
										uni.showToast({
											icon:'none',
											title:"信息更新成功"
										})
									}
								})
								
							}else{
								uni.showToast({
									icon:'none',
									title:res.msg
								})
							}
							
						})
					}
				})
				this.closeActivePop();
				
			},
			
			preSetProperties(dataVal){
				switch (this.popIndex){
					case 0:
						this.user.username = dataVal;
						break;
					case 1:
						this.user.phone = dataVal;
						break;
					case 2:
						this.user.email = dataVal;
						break;
					case 3:
						this.user.wx = dataVal;
						break;
					case 4:
						this.user.password = dataVal;
						break;
				}
			},
			
			logout(){
				// 正式退出
				uni.getStorage({
					key: api.base.userInfoHead,
					success: res => {
						// 让服务器端清楚数据
						api.loginOut(res.data).then(res =>{
							// 退出登录返回
							console.log('退出登录返回：',res);
							if(res.data != null){
								uni.clearStorage();
								uni.showLoading({
									title:"系统清理数据中……",
									mask:true
								})
								setTimeout(() =>{
									uni.reLaunch({
										url:"/pages/login/login"
									})
								},3000)
							}else{
								uni.showToast({
									icon:'none',
									title:"退出失败，请稍后再试"
								})
							}
						})
						
					},
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0;
		padding: 0;

		// 导航
		.timer-nav {
			margin-top: 44rpx;
			margin-bottom: 80rpx;
			display: grid;
			grid-template-columns: 1fr 4fr;

			.nav-back-icon {
				margin-left: 30px;
			}

			.nav-back-text {
				display: flex;
				justify-content: center;
				font-size: 20px;
				line-height: 26px;
				align-items: center;
				font-weight: bold;
			}
		}

		// 用户头像
		.user-editer-head {
			width: 110px;
			height: 110px;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		// 表单
		.user-editer-form {
			width: 80%;
			height: 500px;
			// border: 1rpx red solid;
			margin: 20px auto;
			padding: 20px;

			.uni-label-text {
				font-weight: bold;
				
			}

			input {
				// display: block;
				// width: 80%;
				height: 48px;
				border: 1px #ea5541 solid;
				border-radius: 8px;
				background-color: #eee;
				color: #a8a8a8;
				text-indent: 10px;
				margin-bottom: 20px;

			}
			// 退出
			.user-editer-btn {
				height: 50px;
				margin-top: 30px;
				button{
					border-radius: 25px;
				}
			}
		}

		

		// 弹出层
		.user-editer-pop {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
			background-color: #fff;
			padding: 10px;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			width: 80%;

			.pop-title {
				height: 26px;
				font-size: 14px;
				margin-left: 30rpx;
				margin: 20px;
				text-align: center;
			}

			.pop-input {
				.pop-input-content {
					input {
						height: 40px;
						width: 80%;
						margin: 0 auto;
						border: 1px #ea5541 solid;
						border-radius: 8px;
						background-color: #eee;
						color: #a8a8a8;
						text-indent: 10px;
						line-height: 40px;
					}

					.pop-btn {
						margin: 20px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						button {
							width: 100px;
							height: 40px;
							border-radius: 20px;
							text-align: center;
							line-height: 40px;
							font-size: 16px;
						}
					}
				}

			}
		}

		// 蒙层
		.user-editer-mask {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.9);
			// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			width: 100%;
			height: 100%;
		}

	}
</style>